<template>
	<div class="ImgBg1">
        <div style="height: 80px;width: 100%;">
        	<div style="width: 280px;height: 80px;margin: 0 auto;display: flex;">
        	<!-- 	<div style="width: 60px;height: 3px;background-color: #1890FF;align-self: center;"></div> -->
        		<div style="font-size: 20px;font-weight: bold;line-height: 120px;padding: 0 20px 0 20px;">
        		<el-button  v-if="dataForm.proveStatus === `new`" v-hasPermission="['basic:customer:prove']" type="primary" icon="el-icon-edit" size="small"  @click="handleProve">审核通过</el-button>

           </div>
        		<!-- <div style="width: 60px;height: 3px;background-color: #1890FF;align-self: center;"></div> -->
        	</div>
      <!--  <el-row :gutter="5" class="mb8">


          <el-col :span="1.5"> --> <!--  -->
         <!--  </el-col>

        </el-row> -->
			</div>

			<div style="height: 80px;width: 100%;">
				<div style="width: 280px;height: 80px;margin: 0 auto;display: flex;">
					<div style="width: 60px;height: 3px;background-color: #1890FF;align-self: center;"></div>
					<div style="font-size: 20px;font-weight: bold;line-height: 80px;padding: 0 20px 0 20px;">企业基本信息
					</div>
					<div style="width: 60px;height: 3px;background-color: #1890FF;align-self: center;"></div>
				</div>
        </div>



			<div class="formBox">
				<el-form status-icon :model="dataForm" :rules="rules" ref="dataForm" label-width="200px"
					class="demo-ruleForm">
					<el-form-item label="企业名称">
						<div>{{this.dataForm.customerName}}</div>
					</el-form-item>
					<!-- <el-form-item label="邀请码" prop="yaoqingma">
						<el-input v-model="dataForm.yaoqingma"></el-input>
					</el-form-item> -->
				<el-form-item label="统一社会信用代码" prop="bizLicenceNo">
					<el-input v-model="dataForm.bizLicenceNo"></el-input>

				</el-form-item>
				<el-form-item label="法人/股东姓名" prop="ownerName">
				  <el-input v-model="dataForm.ownerName"></el-input>
				</el-form-item>
				<el-form-item label="法人/股东证件类型" prop="ownerIdType">
				  <el-select v-model="dataForm.ownerIdType" style="width: 100%" filterable clearable placeholder="请选择企业类型">
				    <el-option v-for="option in options.ownerIdTypes" :key="option.key" :label="option.lable" :value="option.key" />
				   </el-select>
				</el-form-item>

				<el-form-item label="法人/股东证件号码" prop="ownerIdNo">
					<el-input v-model="dataForm.ownerIdNo"></el-input>
				</el-form-item>
        <el-form-item label="企业地址" prop="address">
        		<el-input v-model="dataForm.address"></el-input>
        	</el-form-item>

				</el-form>
			</div>
			<div style="height: 120px;width: 100%;">
				<div style="width: 280px;height: 120px;margin: 0 auto;display: flex;">
					<div style="width: 60px;height: 3px;background-color: #1890FF;align-self: center;"></div>
					<div style="font-size: 20px;font-weight: bold;line-height: 120px;padding: 0 20px 0 20px;">企业银行账户
					</div>
					<div style="width: 60px;height: 3px;background-color: #1890FF;align-self: center;"></div>
				</div>
			</div>
			<div class="formBox">
				<el-form status-icon :model="dataForm" :rules="rules2" ref="dataForm2" label-width="200px"
					class="demo-ruleForm">
					<el-form-item label="银行账号" prop="bankAccount">
						<el-input v-model="dataForm.bankAccount"></el-input>
					</el-form-item>
					<el-form-item label="账户名称" prop="bankDepositName">
						<el-input v-model="dataForm.bankDepositName"></el-input>
					</el-form-item>
					<el-form-item label="开户行" prop="bankName">
						<el-input v-model="dataForm.bankName"></el-input>
					</el-form-item>
					<el-form-item label="开户网点" prop="bankOpenBranch">
					<!-- 	<el-input autocomplete="off" v-model="dataForm.bankOpenBranch"></el-input> -->
				    <el-input v-model="dataForm.bankOpenBranch"></el-input>
					</el-form-item>
					<el-form-item label="具体网点" prop="bankAddress">
						<el-input autocomplete="off" v-model="dataForm.bankAddress"></el-input>
					</el-form-item>
				</el-form>
				<!-- <div class="gotop" v-show="gotop" @click="toTop">Top</div> -->


		</div>


			<div style="height: 120px;width: 100%;">
				<div style="width: 280px;height: 120px;margin: 0 auto;display: flex;">
					<div style="width: 60px;height: 3px;background-color: #1890FF;align-self: center;"></div>
					<div style="font-size: 20px;font-weight: bold;line-height: 120px;padding: 0 20px 0 20px;">管理员信息
					</div>
					<div style="width: 60px;height: 3px;background-color: #1890FF;align-self: center;"></div>
				</div>
			</div>
			<div class="formBox">
			<el-form status-icon :model="adminForm" :rules="rules3" ref="dataForm3" label-width="200px"
				class="demo-ruleForm">
				<el-form-item label="登录名" prop="userName">
					<el-input v-model="adminForm.userName"></el-input>
				</el-form-item>
				<el-form-item label="用户姓名" prop="nickName">
					<el-input v-model="adminForm.nickName"></el-input>
				</el-form-item>
				<el-form-item label="证件类型" prop="ownerIdType">
			    <el-select v-model="adminForm.ownerIdType" style="width: 100%" filterable clearable placeholder="请选择证件类型">
			      <el-option v-for="option in options.ownerUserIdTypes" :key="option.key" :label="option.lable" :value="option.key" />
			     </el-select>
				</el-form-item>

				<el-form-item label="证件号码" prop="idCardNo">
			    <el-input v-model="adminForm.idCardNo"></el-input>

				</el-form-item>
				<el-form-item label="邮箱" prop="email">
			        <el-input v-model="adminForm.email"></el-input>

				</el-form-item>
			</el-form>
			</div>





			<div style="height: 120px;width: 100%;">
				<div style="width: 280px;height: 120px;margin: 0 auto;display: flex;">
					<div style="width: 60px;height: 3px;background-color: #1890FF;align-self: center;"></div>
					<div style="font-size: 20px;font-weight: bold;line-height: 120px;padding: 0 20px 0 20px;">上传资料认证
					</div>
					<div style="width: 60px;height: 3px;background-color: #1890FF;align-self: center;"></div>
				</div>
			</div>
			<div style="width: 100%;height: 20px;font-size: 18px;margin-left: 30px;">
				<i class="el-icon-upload"></i>请使用扫描或者实拍图片，要求文字清晰易识别，PS不能通过审核。照片支持jpg/jpeg/bmp/png，大小不超过5M.
			</div>
			<el-divider></el-divider>
			<div style="display: flex;width: 95%;margin: 0 auto;">
				<el-card style="width: 45%;height: 300px;" class="box-card">
					<div slot="header" class="clearfix">
						<span style="font-weight: bold;">统一社会信用代码证(图片大小不超过5M)</span>
					</div>
					<el-upload :action="upLoadUrl" list-type="picture-card"
						:on-preview="handlePictureCardPreview1" :limit="1" :on-remove="handleRemove1" :on-success="fileUpload1"
						:headers="headerObj" accept=".pdf,.jpg,.png">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible1">
						<img width="100%" :src="dialogImageUrl1" alt="">
					</el-dialog>
				</el-card>
				<el-card style="width: 45%;height: 300px;margin-left: 10%;" class="box-card">
					<div slot="header" class="clearfix">
						<span style="font-weight: bold;">法人代表证照(图片大小不超过5M)</span>
					</div>
					<el-upload :action="upLoadUrl" list-type="picture-card"
						:on-preview="handlePictureCardPreview2" :limit="1" :on-remove="handleRemove2" :on-success="fileUpload2"
						:headers="headerObj">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible2">
						<img width="100%" :src="dialogImageUrl2" alt="">
					</el-dialog>
				</el-card>
			</div>
			<div style="width: 95%;margin: 0 auto;display: flex;margin-top: 30px;">
				<div style="width: 50%;display: flex;"><i class="el-icon-upload"></i>统一社会信用代码证正本复印件，<div style="color: #FFBA00;">加盖公章</div>
				</div>
				<div style="width: 50%;margin-left: 10%;display: flex;"><i class="el-icon-upload"></i>法人证件原件照片，身份证则必须提供正反面，<div style="color: #FFBA00;">加盖公章</div>
				</div>
			</div>

			<div style="display: flex;width: 95%;margin: 0 auto;margin-top: 50px;">
				<el-card style="width: 45%;height: 300px;" class="box-card">
					<div slot="header" class="clearfix">
						<span style="font-weight: bold;">银行账户证明(图片大小不超过5M)</span>
					</div>
					<el-upload :action="upLoadUrl" list-type="picture-card"
						:on-preview="handlePictureCardPreview3" :limit="1" :on-remove="handleRemove3" :on-success="fileUpload3"
						:headers="headerObj">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible3">
						<img width="100%" :src="dialogImageUrl3" alt="">
					</el-dialog>
				</el-card>
				<el-card style="width: 45%;height: 300px;margin-left: 10%;" class="box-card">
					<div slot="header" class="clearfix">
						<span style="font-weight: bold;">企业管理员证照(图片大小不超过5M)</span>
					</div>
					<el-upload :action="upLoadUrl" list-type="picture-card"
						:on-preview="handlePictureCardPreview4" :limit="1" :on-remove="handleRemove4" :on-success="fileUpload4"
						:headers="headerObj">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible4">
						<img width="100%" :src="dialogImageUrl4" alt="">
					</el-dialog>
				</el-card>
			</div>

			<div style="width: 95%;margin: 0 auto;display: flex;margin-top: 30px;">
				<div style="width: 50%;">
					<div style="display: flex;">
						<i class="el-icon-upload"></i>一下材料二选一，要求能显示户名、账号及开户支行信息
					</div>
					<div>1、一般收款户：银行流水回单原件照片、网银截屏</div>
					<div>2、基本收款户：开户许可证原件照片</div>
				</div>
				<div style="width: 50%;margin-left: 10%;">
					<div style="display: flex;">
						<i class="el-icon-upload"></i>企业管理员证件照片、身份证则必须提供正反面，
						<div style="color: #FFBA00;">加盖公章</div>
					</div>
					<div>请务必与用户信息中填写的证件信息一致</div>

				</div>
			</div>

			<div style="display: flex;width: 95%;margin: 0 auto;margin-top: 50px;">
				<el-card style="width: 45%;height: 300px;" class="box-card">
					<div slot="header" class="clearfix">
						<span style="font-weight: bold;">企业管理员授权书(图片大小不超过5M)</span>
					</div>
					<el-upload :action="upLoadUrl" list-type="picture-card"
						:on-preview="handlePictureCardPreview5" :limit="1" :on-remove="handleRemove5" :on-success="fileUpload5"
						:headers="headerObj">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible5">
						<img width="100%" :src="dialogImageUrl5" alt="">
					</el-dialog>
				</el-card>
				<el-card style="width: 45%;height: 300px;margin-left: 10%;" class="box-card">
					<div slot="header" class="clearfix">
						<span style="font-weight: bold;">管理员手持证件照(图片大小不超过5M)</span>
					</div>
				<el-upload :action="upLoadUrl" list-type="picture-card"
					:on-preview="handlePictureCardPreview6" :limit="1" :on-remove="handleRemove6" :on-success="fileUpload6"
					:headers="headerObj">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible6">
					<img width="100%" :src="dialogImageUrl6" alt="">
				</el-dialog>
				</el-card>
			</div>





			<div style="width: 95%;height: 200px;margin: 0 auto;background-color: #E9F4FC;margin-top: 30px;display: flex;">

			</div>

<div class="dialog_container">
      <!--复核-->
      <el-dialog
        :title="proveDialog.title"
        :close-on-click-modal="false"
        :before-close="closeProveDialog"
        :visible.sync="proveDialog.visible"
        width="35%"
      >
        <el-form :model="proveDialogData" label-position="right" label-width="120px" class="dialog_form">
          <el-form-item label="审核结果：">
            <el-select v-model="proveDialogData.proveStatus" placeholder="请选择" clearable size="mini">
              <el-option v-for="option in  options.proveOptions" :key="option.key" :label="option.label" :value="option.key" />
            </el-select>
          </el-form-item>
          <el-form-item label="审核备注：">
            <el-input v-model="proveDialogData.remark" />

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeProveDialog()">取消</el-button>
          <el-button type="primary" @click="confirmProveDialog()">保存</el-button>
        </div>
      </el-dialog>
    </div>

	</div>
</template>

<script>
	import Cookies from 'js-cookie'
  import CustomerApi from '@/api/basic/CustomerApi'
  import UserApi from '@/api/system/UserApi'
  import appConstant from '@/constant/AppConstant'
	const TokenKey = 'admin_token'
	export default {
		data() {
			return {
        options: {
          ownerIdTypes: appConstant.ownerIdTypes,
          ownerUserIdTypes: appConstant.ownerIdTypes,
            proveOptions: appConstant.proveList,
        },
				upLoadUrl:'http://localhost:9527/system/file/upload',
				headerObj:{
					Authorization: Cookies.get(TokenKey)
				},
				dialogImageUrl1: '', //信用代码证本地地址
				dialogImageUrl2: '', //法人代表证照本地地址
				dialogImageUrl3: '', //银行账户证明本地地址
				dialogImageUrl4: '', //企业管理员证照本地地址
				dialogImageUrl5: '', //企业管理员授权书证本地地址
				dialogImageUrl6: '', //管理员手持证件照本地地址
				dialogVisible1: false, //信用代码证查看状态
				dialogVisible2: false, //法人代表证照查看状态
				dialogVisible3: false, //银行账户证明查看状态
				dialogVisible4: false, //企业管理员证照查看状态
				dialogVisible5: false, //企业管理员授权书查看状态
				dialogVisible6: false, //管理员手持证件照查看状态
				gotop: false, //回到顶部
				active: 1, //步骤进行数
				centerDialogVisible: true, //协议框
				dataForm: { //企业银行信息
				 id: '',
					yaoqingma: '', //邀请码
				  customerType: '',
					bizLicenceNo: '', //信用代码
					customerName: '', //姓名
					ownerIdType: '', //证件类型
					ownerIdNo: '', //证件号
					address: '', //地址
					bankAddress: '', //详细地址
					bankAccount: '', //银行账号
					bankName: '', //账户名称
					bankOpenBranch: '', //开户行
					bankDepositName: '', //
					bankAddress: '' ,//具体网点
          adminUserId: ''
				},
			adminForm: { //管理员信息
			  id: '',
				userName: '', //登录名
				nickName: '', //管理员姓名
				ownerIdType: '', //证件类型
				idCardNo: '', //证件号码
				email: '' //邮箱
			},
      proveDialogData: {
       proveStatus: null,
        remark: null,
       ids: null
      },
      proveDialog: {
        title: '审核',
        visible: false
      },
			imgForm:{
				xydm:'',
				frdb:'',
				yhzm:'',
				imgAdmin:'',
				adminText: '',
				adminImg:''
			},
		rules: { //企业信息
			bizLicenceNo: [{
				required: true,
				message: '请输入信用代码',
				trigger: 'blur'
			}],
			ownerName: [{
				required: true,
				message: '请输入法人/股东姓名',
				trigger: 'blur'
			}],
			ownerIdType: [{
				required: true,
				message: '请选择证件类型',
				trigger: 'blur'
			}],
			ownerIdNo: [{
				required: true,
				message: '请输入证件号',
				trigger: 'blur'
			}]
		},
	rules2: { //银行信息
		bankAccount: [{
			required: true,
			message: '请输入银行账号',
			trigger: 'blur'
		}],
		bankName: [{
			required: true,
			message: '请选择开户行',
			trigger: 'blur'
		}]

	},
		rules3: { //用户信息
			loginName: [{
				required: true,
				message: '请输入登录名',
				trigger: 'blur'
			}],
			adminName: [{
				required: true,
				message: '请输入管理员姓名',
				trigger: 'blur'
			}],
			leixing: [{
				required: true,
				message: '请选择证件类型',
				trigger: 'blur'
			}],
			zhengjianhaoma: [{
				required: true,
				message: '请输入证件号码',
				trigger: 'blur'
			}],
			email: [{
				required: true,
				message: '请输入邮箱',
				trigger: 'blur'
			}]
		}
			}
		},
    created() {
      this.initForm()
    	/* CustomerApi.getMyCustInfor().then(response => {
    		this.dataForm = response.data
    	}) */
      /* UserApi.getMyInfor().then(response => {
      	this.adminForm = response.data
      }) */
    },
		mounted() {
			document.querySelector('body').setAttribute('style', 'background-color:#F5F7FA')
			window.addEventListener("scroll", this.handleScroll, true);
		},
		beforeDestroy() {
			document.querySelector('body').removeAttribute('style')
		},
		methods: {
      initForm() {
        const id = this.$route.params.id
        CustomerApi.get(id).then(response => {
          this.dataForm = response.data
          UserApi.get(this.dataForm.adminUserId).then(response => {
          	this.adminForm = response.data
             })
        })


      },
      handleProve() {
        const id = this.$route.params.id
           this.proveDialog.visible = true
           this.proveDialogData.ids = id
      },
      closeProveDialog() {
        this.proveDialog = {
          title: '审核',
          visible: false
        }
        this.proveDialogData = {
          proveStatus: null
        }
          this.initForm()
      },
      confirmProveDialog() {
          const params = {
            proveStatus: this.proveDialogData.proveStatus,
            remark: this.proveDialogData.remark,
            ids: this.proveDialogData.ids
         }
          CustomerApi.prove(params).then(() => {
            this.$message.success('审核成功!')
            this.closeProveDialog()
          })
         this.initForm()
      },
			fileUpload1(e){//统一社会信用代码证回调
				this.imgForm.xydm = e.data
				console.log(e)
			},
			fileUpload2(e){//法人代表证照回调
				this.imgForm.frdb = e.data
			},
			fileUpload3(e){//银行账户证明回调
				this.imgForm.yhzm = e.data
			},
			fileUpload4(e){//企业管理员证照回调
				this.imgForm.imgAdmin = e.data
			},
			fileUpload5(e){//企业管理员授权回调
				this.imgForm.adminText = e.data
			},
			fileUpload6(e){//管理员手持证件照回调
				this.imgForm.adminImg = e.data
			},
			backAuth(){
				this.active = 2;
				this.toTop()
			},

			goAudit(){
				console.log(this.imgForm)
				this.active = 4;
				CustomerApi.edit()(this.imgForm).then(response => {
				  this.$message.success('提交成功')
				})
				this.toTop()
				setTimeout(()=>{
					this.$router.push({path:'/'})
				},2000)
			},
			handleRemove1(file, fileList) { //信用代码证上传
				this.imgForm.xydm = ''
			},
			handlePictureCardPreview1(file) { //信用代码证上传
				this.dialogImageUrl1 = file.url;
				console.log(file.url)
				this.dialogVisible1 = true;
			},
			handleRemove2(file, fileList) { //信用代码证上传
				this.imgForm.frdb = ''
			},
			handlePictureCardPreview2(file) { //信用代码证上传
				this.dialogImageUrl2 = file.url;
				console.log(file.url)
				this.dialogVisible2 = true;
			},
			handleRemove3(file, fileList) { //信用代码证上传
				this.imgForm.yhzm = ''
			},
			handlePictureCardPreview3(file) { //信用代码证上传
				this.dialogImageUrl3 = file.url;
				console.log(file.url)
				this.dialogVisible3 = true;
			},
			handleRemove4(file, fileList) { //信用代码证上传
				this.imgForm.imgAdmin = ''
			},
			handlePictureCardPreview4(file) { //信用代码证上传
				this.dialogImageUrl4 = file.url;
				console.log(file.url)
				this.dialogVisible4 = true;
			},
			handleRemove5(file, fileList) { //信用代码证上传
				this.imgForm.adminText = ''
			},
			handlePictureCardPreview5(file) { //信用代码证上传
				this.dialogImageUrl5 = file.url;
				console.log(file.url)
				this.dialogVisible5 = true;
			},
			handleRemove6(file, fileList) { //信用代码证上传
				this.imgForm.adminImg = ''
			},
			handlePictureCardPreview6(file) { //信用代码证上传
				this.dialogImageUrl6 = file.url;
				console.log(file.url)
				this.dialogVisible6 = true;
			},
			handleScroll() { //回到顶部
				let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
				scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
			},
			toTop() { //回到顶部
				let top = document.documentElement.scrollTop || document.body.scrollTop;
				// 实现滚动效果
				const timeTop = setInterval(() => {
					document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
					if (top <= 0) {
						clearInterval(timeTop);
					}
				}, 10);
			},
			backUser() {
				this.active = 1;
				this.toTop()
			},
			goAuth(formName3) {
				this.$refs[formName3].validate((valid) => {
					if (valid) {
						this.active = 3;
			      UserApi.updateCompany(this.adminForm).then(response => {
			        this.$message.success('更新成功')
			      })
						this.toTop()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.submitForm2('dataForm2')
						this.toTop()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		submitForm2(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.active = 2;
		      CustomerApi.updateCompany(this.dataForm).then(response => {
		            this.$message.success('更新成功')
		      })

					this.toTop()
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.toTop()
			}
		},
	}
</script>

<style>
	.ImgBg1 {
		/* height: 1800px; */
		width: 100%;
	}

	.topBar {
		position: fixed;
		top: 0;
		height: 80px;
		width: 100%;
		background-color: #FFFFFF;
		box-shadow: 0px 5px 19px 0px #b8b8b8;
		z-index: 999;
	}

	.secondBar {
		width: 90%;
		height: 80px;
		margin: 0 auto;
		display: flex;
	}

	.imgBox {
		width: 100px;
		height: 60px;
		/* margin-top: 10px; */
		align-self: center;
	}

	.lineBar {
		height: 35px;
		width: 2px;
		background-color: #001528;
		align-self: center;
		margin-left: 20px;
	}

	.title {
		margin-left: 20px;
		font-size: 25px;
		font-weight: bold;
		align-self: center;
	}

	.fatherBox {
		/* height: 850px; */
		width: 90%;
		margin: 0 auto;
		margin-top: 5%;
		background-color: #FFFFFF;
		border: 1px solid #EEEEEE;
	}

	.fatherBox1 {
		/* height: 400px; */
		width: 90%;
		margin: 0 auto;
		margin-top: 5%;
		background-color: #FFFFFF;
		border: 1px solid #EEEEEE;
	}

	.formBox {
		width: 80%;
		margin: 0 auto;
		border: 1px solid #EEEEEE;
	}

	.demo-ruleForm {
		width: 60%;
		margin: 0 auto;
		/* border: 1px solid #EEEEEE; */

	}
</style>
